"use client"

import React, { useState } from "react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { blogPosts } from "@/data/personalData"
import { Calendar, Clock, ArrowRight, Search, Tag, TrendingUp } from "lucide-react"

export const Blog = () => {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedTag, setSelectedTag] = useState("全部")

  const allTags = Array.from(new Set(blogPosts.flatMap(post => post.tags)))
  const filterOptions = ["全部", ...allTags]

  const filteredPosts = blogPosts.filter(post => {
    const matchesTag = selectedTag === "全部" || post.tags.includes(selectedTag)
    const matchesSearch = post.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
                         post.description.toLowerCase().includes(searchTerm.toLowerCase())
    return matchesTag && matchesSearch
  })

  const formatDate = (dateString: string) => {
    const options: Intl.DateTimeFormatOptions = {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    }
    return new Date(dateString).toLocaleDateString('zh-CN', options)
  }

  const getReadTimeText = (minutes: number) => {
    return `${minutes} 分钟阅读`
  }

  const featuredPost = blogPosts[0]
  const otherPosts = filteredPosts.filter(post => post.id !== featuredPost.id)

  return (
    <section id="blog" className="py-20 bg-secondary/20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
            技术博客
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
            分享技术见解、开发经验和学习心得
          </p>

          {/* Search and Filter */}
          <div className="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <input
                type="text"
                placeholder="搜索文章..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              />
            </div>
            <div className="flex items-center gap-2">
              <Tag className="h-4 w-4 text-muted-foreground" />
              <select
                value={selectedTag}
                onChange={(e) => setSelectedTag(e.target.value)}
                className="px-4 py-2 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              >
                {filterOptions.map(option => (
                  <option key={option} value={option}>{option}</option>
                ))}
              </select>
            </div>
          </div>
        </div>

        {/* Featured Post */}
        <div className="mb-16">
          <div className="flex items-center gap-2 mb-6">
            <TrendingUp className="h-5 w-5 text-primary" />
            <h3 className="text-2xl font-bold text-foreground">热门文章</h3>
          </div>
          <Card className="overflow-hidden hover:shadow-lg transition-all duration-300">
            <div className="md:flex">
              <div className="md:w-2/5 relative h-64 md:h-auto">
                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                  <div className="w-20 h-20 bg-primary/10 rounded-lg flex items-center justify-center">
                    <span className="text-2xl font-bold text-primary">
                      {featuredPost.title.charAt(0)}
                    </span>
                  </div>
                </div>
              </div>
              <div className="md:w-3/5 p-8">
                <div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
                  <span className="flex items-center gap-1">
                    <Calendar className="h-4 w-4" />
                    {formatDate(featuredPost.date)}
                  </span>
                  <span className="flex items-center gap-1">
                    <Clock className="h-4 w-4" />
                    {getReadTimeText(featuredPost.readTime)}
                  </span>
                </div>
                <h3 className="text-2xl font-bold text-foreground mb-3 hover:text-primary transition-colors cursor-pointer">
                  {featuredPost.title}
                </h3>
                <p className="text-muted-foreground mb-6 leading-relaxed">
                  {featuredPost.description}
                </p>
                <div className="flex items-center justify-between">
                  <div className="flex flex-wrap gap-2">
                    {featuredPost.tags.map((tag) => (
                      <span
                        key={tag}
                        className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  <Button>
                    阅读更多
                    <ArrowRight className="h-4 w-4 ml-2" />
                  </Button>
                </div>
              </div>
            </div>
          </Card>
        </div>

        {/* Other Posts Grid */}
        {otherPosts.length > 0 && (
          <div>
            <h3 className="text-2xl font-bold text-foreground mb-8">
              最新文章
            </h3>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {otherPosts.map((post) => (
                <Card
                  key={post.id}
                  className="group overflow-hidden hover:shadow-lg transition-all duration-300 hover:scale-[1.02]"
                >
                  <div className="h-48 bg-gradient-to-br from-primary/20 to-secondary/20 relative overflow-hidden">
                    <div className="absolute inset-0 flex items-center justify-center">
                      <div className="w-16 h-16 bg-primary/10 rounded-lg flex items-center justify-center">
                        <span className="text-xl font-bold text-primary">
                          {post.title.charAt(0)}
                        </span>
                      </div>
                    </div>
                  </div>
                  <CardHeader>
                    <div className="flex items-center gap-3 text-sm text-muted-foreground mb-2">
                      <span className="flex items-center gap-1">
                        <Calendar className="h-3 w-3" />
                        {formatDate(post.date)}
                      </span>
                      <span className="flex items-center gap-1">
                        <Clock className="h-3 w-3" />
                        {post.readTime}分钟
                      </span>
                    </div>
                    <CardTitle className="group-hover:text-primary transition-colors line-clamp-2">
                      {post.title}
                    </CardTitle>
                    <CardDescription className="line-clamp-3">
                      {post.description}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <div className="flex flex-wrap gap-1 mb-4">
                      {post.tags.slice(0, 2).map((tag) => (
                        <span
                          key={tag}
                          className="px-2 py-1 bg-primary/10 text-primary rounded-full text-xs"
                        >
                          {tag}
                        </span>
                      ))}
                      {post.tags.length > 2 && (
                        <span className="px-2 py-1 bg-secondary/10 text-secondary-foreground rounded-full text-xs">
                          +{post.tags.length - 2}
                        </span>
                      )}
                    </div>
                  </CardContent>
                  <CardFooter className="pt-0">
                    <Button variant="outline" className="w-full group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
                      阅读全文
                      <ArrowRight className="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" />
                    </Button>
                  </CardFooter>
                </Card>
              ))}
            </div>
          </div>
        )}

        {/* No Results */}
        {filteredPosts.length === 0 && (
          <div className="text-center py-12">
            <div className="w-24 h-24 bg-muted rounded-full flex items-center justify-center mx-auto mb-4">
              <Search className="h-12 w-12 text-muted-foreground" />
            </div>
            <h3 className="text-xl font-semibold text-foreground mb-2">
              没有找到匹配的文章
            </h3>
            <p className="text-muted-foreground">
              试试调整搜索条件或筛选器
            </p>
          </div>
        )}

        {/* Blog Stats */}
        <div className="mt-16 text-center">
          <div className="inline-flex items-center gap-8 p-6 bg-background rounded-lg border">
            <div className="text-center">
              <div className="text-2xl font-bold text-primary">{blogPosts.length}</div>
              <div className="text-sm text-muted-foreground">总文章数</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-primary">
                {blogPosts.reduce((acc, post) => acc + post.readTime, 0)}
              </div>
              <div className="text-sm text-muted-foreground">总阅读时间(分钟)</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-primary">{allTags.length}</div>
              <div className="text-sm text-muted-foreground">技术标签</div>
            </div>
          </div>
        </div>

        {/* Newsletter */}
        <div className="mt-16 text-center">
          <Card className="max-w-2xl mx-auto p-8 bg-gradient-to-br from-primary/5 to-secondary/5">
            <CardHeader className="px-0">
              <CardTitle className="text-2xl">订阅技术周刊</CardTitle>
              <CardDescription>
                获取最新的技术文章、开发经验和行业动态
              </CardDescription>
            </CardHeader>
            <CardContent className="px-0">
              <div className="flex flex-col sm:flex-row gap-4">
                <input
                  type="email"
                  placeholder="输入您的邮箱地址"
                  className="flex-1 px-4 py-3 border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                />
                <Button className="px-8">
                  立即订阅
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}